<template>
	<view class="home">
		<view class="light_box">
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClickHandle(item, index)">
				<view class="l">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="r">
					<view class="name">
						<text class="label">姓名：</text>
						<text class="value">{{ item.name }}</text>
					</view>
					<view class="uid">
						<text class="label">年龄：</text>
						<text class="value">{{ item.age }}岁</text>
					</view>
					<view class="uid">
						<text class="label">性别：</text>
						<text class="value">{{ sexEnum[item.sex] }}</text>
					</view>
					<view class="uid">
						<text class="label">设备编号：</text>
						<text class="value">{{ item.number }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="add_btn">
			<view class="add_btn_box" @click="addClickHandle">
				<text>+</text>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog" :animation="true">
			<view class="popup_box">
				<view class="popup_box_header">
					<text>添加设备</text>
				</view>
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="title">姓名:</view>
						<input class="uni-input" name="name" placeholder="请输入姓名" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">性别：</view>
						<radio-group name="sex">
							<label style="margin-right: 20rpx;">
								<radio value="0" /><text>男</text>
							</label>
							<label>
								<radio value="1" /><text>女</text>
							</label>
						</radio-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">年龄:</view>
						<input class="uni-input" name="age" placeholder="请输入年龄" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">编号:</view>
						<input class="uni-input" name="number" placeholder="请输入编号" />
					</view>
					<view class="op">
						<button class="btn cancel" form-type="reset">取消</button>
						<button class="btn comfirm" form-type="submit">确认</button>
					</view>
				</form>

			</view>
		</uni-popup>
		<TabBar></TabBar>
	</view>
</template>

<script>
	import TabBar from "/components/tabbar/tabbar.vue";
	import {
		getCarList,
		addHealthDevice
	} from "../../api/car.js"
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				dataList: [],
				sexEnum: {
					0: "男",
					1: "女"
				}
			}
		},
		onShow() {
			this.getCarLists()
		},
		methods: {
			itemClickHandle(item, index) {
				uni.navigateTo({
					url: `/pages/controll/controll?number=${item.number}&name=${item.name}&sex=${item.sex}&age=${item.age}`,
				})
			},
			async getCarLists() {
				const res = await getCarList()
				if (res.code === 200) {
					this.dataList = res.data
				}
			},
			addClickHandle() {
				// console.log(this.$refs.popup)
				this.$refs.popup.open()
			},
			formSubmit: async function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				console.log(formdata)
				const userInfo = uni.getStorageSync("userInfo")

				// 判空处理
				if (!formdata.name || !formdata.name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}

				if (!formdata.age) {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none'
					});
					return;
				}

				if (!formdata.number) {
					uni.showToast({
						title: '请输入编号',
						icon: 'none'
					});
					return;
				}

				if (!formdata.sex) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					});
					return;
				}

				const res = await addHealthDevice({
					age: formdata.age,
					name: formdata.name,
					number: formdata.number,
					sex: formdata.sex,
					userName: userInfo.userName
				})

				console.log(res)

				if (res.code == 200) {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
					this.$refs.popup.close()
				}
			},
			formReset: function(e) {
				console.log('清空数据')
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		width: 100%;
		height: calc(100vh - 88rpx);
		background-color: #F7F8FA;
		position: relative;

		.add_btn {
			position: fixed;
			right: 100rpx;
			bottom: 250rpx;
			width: 100rpx;
			height: 100rpx;
			border: 2rpx solid #eee;
			border-radius: 50%;
			overflow: hidden;

			.add_btn_box {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 60rpx;
				font-weight: bold;
				background-color: $uni-color-primary;
				color: #fff;

				text {
					line-height: 15rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		.light_box {
			box-sizing: border-box;
			padding: 20rpx;
			width: 100%;
			height: 100%;
			overflow-y: scroll;

			.item {
				width: 100%;
				min-height: 200rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				box-shadow: 2rpx 2rpx 2rpx #eee;
				box-sizing: border-box;
				padding: 30rpx;
				display: flex;

				.l {
					width: 160rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.r {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.label,
					{
					margin-bottom: 10rpx;
					font-size: 28rpx;
				}

				.value {
					color: #666;
					font-size: 26rpx;
				}

				.state_online {
					color: green;
				}

				.state_unline {
					color: red;
				}
			}


		}
	}
	}

	.popup_box {
		width: 80vw;
		// height: 400rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;

		.popup_box_header {
			width: 100%;
			height: 60rpx;
			border-bottom: 2rpx solid #eeeeee;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
		}

		.uni-form-item {
			display: flex;
			height: 80rpx;
			align-items: center;
			// font-size: 20rpx;
			// border-bottom: 2rpx solid #eeeeee;

			.title {
				margin-right: 20rpx;
				width: 140rpx;
			}
		}

		.op {
			width: 100%;
			display: flex;
			padding-top: 20rpx;
			border-top: 2rpx solid #eeeeee;

			.comfirm {
				margin-left: 20rpx;
				background-color: $uni-color-primary;
				color: #fff;
			}

			.btn {
				flex: 1;
				border: none;

				&::after {
					width: 0;
					height: 0;
				}
			}
		}
	}
	
	
</style>